<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
		<link rel="stylesheet" type="text/css" href="../css/mui.css" />
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<script src="../js/mui.js"></script>
		<style>
		
		#myslider img{
			height: 10.0625rem;
		}
			html,
			body {
				background-color: #efeff4;
			}

			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}

			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}

			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}

			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}

			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}

			.mui-pull-top-tips .mui-pull-loading {
				/*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/

				margin: 0;
			}

			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}



			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}

			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}

			.mui-pull-top-canvas canvas {
				width: 40px;
			}

			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
		</style>

	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<div class="mui-input-row mui-search">
				<input type="search" class="mui-input-clear" placeholder="">
			</div>
		</header>

		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl"
					class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile">
							推荐
						</a>
						<a class="mui-control-item" href="#item2mobile">
							热点
						</a>
						<a class="mui-control-item" href="#item3mobile">
							教育
						</a>
						<a class="mui-control-item" href="#item4mobile">
							社会
						</a>
						<a class="mui-control-item" href="#item5mobile">
							娱乐
						</a>
						<a class="mui-control-item" href="#item6mobile">
							科技
						</a>
					</div>
				</div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll" path="/view/home">
								<!-- 轮播图 -->
								<div id="myslider" class="mui-slider ">
									<div class="mui-slider-group mui-slider-loop">
										<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
										<div class="mui-slider-item mui-slider-item-duplicate">
											<a href="#">
												<img
													src="https://img.36krcdn.com/20220309/v2_ee6075c858f24951b19e43f796139906_img_png">
											</a>
										</div>
										<!-- 第一张 -->
										<div class="mui-slider-item ">
											<a href="#">
												<img
													src="https://img.36krcdn.com/20220309/v2_d2cd9ef1994c4a79ae081dcb40ebee64_img_jpg">
											</a>
										</div>
										<!-- 第二张 -->
										<div class="mui-slider-item ">
											<a href="#">
												<img
													src="https://img.36krcdn.com/20220309/v2_bd7fc07320ff42678f331fb94e3f2ee2_img_png">
											</a>
										</div>
										<!-- 第三张 -->
										<div class="mui-slider-item ">
											<a href="#">
												<img
													src="https://img.36krcdn.com/20220309/v2_fd70032dc53c41a9b17d8d69f348781f_img_png">
											</a>
										</div>
										<!-- 第四张 -->
										<div class="mui-slider-item ">
											<a href="#">
												<img
													src="https://img.36krcdn.com/20220309/v2_84fd890fcb3c47c98c776ac55915491d_img_jpg">
											</a>
										</div>
										<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
										<div class="mui-slider-item  mui-slider-item-duplicate">
											<a href="#">
												<img
													src="https://img.36krcdn.com/20220309/v2_d2cd9ef1994c4a79ae081dcb40ebee64_img_jpg">
											</a>
										</div>
									</div>
									<div class="mui-slider-indicator">
										<div class="mui-indicator mui-active"></div>
										<div class="mui-indicator"></div>
										<div class="mui-indicator"></div>
										<div class="mui-indicator"></div>
									</div>
								</div>
								<!-- 轮播图 -->

								<ul class="mui-table-view">


								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll" path="/view/hot">
								<ul class="mui-table-view">


								</ul>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll" path="/view/shehui">
								<ul class="mui-table-view">


								</ul>
							</div>
						</div>
					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll" path="/view/jiaoyu">
								<ul class="mui-table-view ">

								</ul>
							</div>
						</div>
					</div>
					<div id="item5mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll" path="/view/yule">
								<ul class="mui-table-view">


								</ul>
							</div>
						</div>
					</div>
					<div id="item6mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll" path="/view/keji">
								<ul class="mui-table-view">


								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>




	</body>
	<script src="../js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/myurl.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		mui.init();
		(function($) {
			//阻尼系数
			var deceleration = mui.os.ios ? 0.003 : 0.0009;
			$('.mui-scroll-wrapper').scroll({
				bounce: false,
				indicators: true, //是否显示滚动条
				deceleration: deceleration
			});
			$.ready(function() {
				//循环初始化所有下拉刷新，上拉加载。
				$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index,
					pullRefreshEl) {
					$(pullRefreshEl).pullToRefresh({
						down: {
							callback: function() {

								const path = this.element.getAttribute('path')
								var self = this;
								var lis = self.element.querySelector('.mui-table-view')
									.children.length;
								mui.post(myurl + path, {
									length: `${lis}`
								}, function(data) {

									// const arr = data.result.list
									if (lis + 10 > 80) {
										self.endPullDownToRefresh();
										mui('.mui-pull-loading')[0].innerText =
											'没有更多数据了'
										mui.alert('没有更多数据了')
										return
									}
									setTimeout(function() {
										var ul = self.element.querySelector(
											'.mui-table-view');
										ul.insertBefore(createFragment(ul,
												index, 10, data, path), ul
											.firstChild);
										self.endPullDownToRefresh();
									}, 1000);

								}, 'json')

							}
						},
						up: {
							callback: function() {
								const path = this.element.getAttribute('path')

								var self = this;
								var lis = self.element.querySelector('.mui-table-view')
									.children.length;

								if (lis + 5 > 80) {
									self.endPullUpToRefresh()
									mui('.mui-pull-loading')[0].innerText = '没有更多数据了'
									return
								}

								mui.post(myurl + path, {
									length: `${lis}`
								}, function(data) {
									// const arr = data.result.list

									setTimeout(function() {
										var ul = self.element
											.querySelector(
												'.mui-table-view');
										ul.appendChild(createFragment(ul,
											index, 5, data, path));
										self.endPullUpToRefresh();
									}, 1000);
								}, 'json')

							}
						}
					});
				});
				var createFragment = function(ul, index, count, arr, path) {
					var length = ul.querySelectorAll('li').length;
					var fragment = document.createDocumentFragment();
					var li;
					for (var i = 0; i < count; i++) {

						li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.setAttribute('href', arr[i].id)
						li.setAttribute('path', path)
						li.innerHTML = `<div class="news-item">
					
											<div class="news-pic">
												<img
													src=${arr[i].pic}>

											</div>

											<div class="news-info">
												<div class="news-title">
													${arr[i].title}
												</div>

												<div class="news-form">
													<div class="autor">
														${arr[i].src}
													</div>
													<div class="news-time">
														<i></i>
														${arr[i].time}
													</div>
												</div>
											</div>

										</div>`
						fragment.appendChild(li);
					}


					return fragment;
				};
			});
		})(mui);


		//轮播图开启
		var slider = mui('#myslider')
		slider.slider({
			interval: 2000
		})





		if ($('#item1mobile .mui-table-view ').length == 1) {
			mui.post(myurl + '/view/home', {
				length: '0'
			}, function(data) {
				// const arr = data.result.list

				getNews(data, 10, 0, '/view/home')




			}, 'json')
		}



		function getNews(arr, count, index, path) {
			for (let i = 0; i < count; i++) {
				const li = document.createElement('li')
				li.className = 'mui-table-view-cell'
				li.setAttribute('href', arr[i].id)
				li.setAttribute('path', path)
				li.innerHTML = `<div class="news-item">
											<div class="news-pic">
												<img
													src=${arr[i].pic}>

											</div>

											<div class="news-info">
												<div class="news-title">
													${arr[i].title}
												</div>

												<div class="news-form">
													<div class="autor">
														${arr[i].src}
													</div>
													<div class="news-time">
														<i></i>
														${arr[i].time}
													</div>
												</div>
											</div>

										</div>`
				switch (index) {
					case 0:
						mui(`#item1mobile .mui-table-view`)[0].appendChild(li)
						break;
					case 1:
						mui(`#item2mobile .mui-table-view`)[0].appendChild(li)
						break;
					case 2:
						mui(`#item3mobile .mui-table-view`)[0].appendChild(li)
						break;
					case 3:
						mui(`#item4mobile .mui-table-view`)[0].appendChild(li)
						break;
					case 4:
						mui(`#item5mobile .mui-table-view`)[0].appendChild(li)
						break;
					case 5:
						mui(`#item6mobile .mui-table-view`)[0].appendChild(li)
						break;
					default:
						break;
				}

			}

		}





		mui('#slider')[0].addEventListener('slide', function(e) {

			switch (e.detail.slideNumber) {
				case 0:
					mui.post(myurl + '/view/home', {
						length: '0'
					}, function(data) {


						getNews(data, 10, 0, '/view/home')

					}, 'json')
					break;
				case 1:

					mui.post(myurl + '/view/hot', {
						length: '0'
					}, function(data) {



						getNews(data, 10, 1, '/view/hot')

					}, 'json')
					break;
				case 2:
					mui.post(myurl + '/view/jiaoyu', {
						length: '0'
					}, function(data) {


						getNews(data, 10, 2, '/view/jiaoyu')

					}, 'json')
					break;
				case 3:
					mui.post(myurl + '/view/shehui', {
						length: '0'
					}, function(data) {


						getNews(data, 10, 3, '/view/shehui')

					}, 'json')
					break;
				case 4:
					mui.post(myurl + '/view/yule', {
						length: '0'
					}, function(data) {


						getNews(data, 10, 4, '/view/yule')

					}, 'json')
					break;
				case 5:
					mui.post(myurl + '/view/keji', {
						length: '0'
					}, function(data) {


						getNews(data, 10, 5, '/view/keji')

					}, 'json')
					break;
				default:
					break;
			}





		})


		mui('#slider').on('tap', '.mui-table-view-cell', function() {
			const id = this.getAttribute('href')
			const path = this.getAttribute('path')
			parent.location.href = myurl +
				`/pages/news.html?id=${id}&path=${path}&userid=${localStorage.getItem('userid')}`

		})
	</script>




</html>
